@font-face {
	font-family: 'Times New Roman';
	src: url("../font/timesnewroman.ttf");
}

/*	
	Styles for Rodion's Mern website.
  Copyright (C) 2024  Rodion Mern

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

* {
	margin:0;
	padding:0;
}

*::selection {
	color:white;
	background:gray;
}

body {
	background:lightgray;
	font-family:'Times New Roman';
}

h2 {
	text-align:center;
}

.mern-title {
	font-size:20px;
}

.mern-title:hover {
	color: lightgray;
	cursor:pointer;
}

.vertical-hr {
	display:none;
	height:25px;
	border:1px solid lightgray;
}

a {
	color:silver;
}

a:hover {
	color:darkgray;
	cursor:pointer;
	text-decoration:none;
}

.current-page {
	color:whitesmoke;
	text-decoration:none;
}

.other-page {
	color:white;
	text-decoration:none;
}

.current-page:hover, .other-page:hover {
	color:Gainsboro;
	text-decoration:underline;
}

nav {
	display:flex;
	justify-content:space-evenly;
	align-items:center;
	height:50px;
	width:100%;
	color:white;
	background:darkgray;
	box-shadow:0px 1px 5px darkgray;
}

.navigation-menu {
	display:flex;
	justify-content:space-between;
	height:auto;
	width:240px;
	list-style:none;
}

.main {
	display:flex;
	justify-content:center;
	align-items:center;
	height:640px;
	width:100%;
}

.content {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	height:320px;
	width:640px;
	background:white;
	border-radius:1px;
	box-shadow:0px 0px 5px darkgray;
}

.title {
	width: 480px;	
	font-size:22px;
	margin-top:10px;
}

.links {
	display:flex;
	justify-content:space-between;
	height:auto;
	width:240px;
	font-size:18px;
	list-style:none;
	margin-top:10px;
	margin-bottom:10px;
}

.about-paragraph {
	text-align:center;
	width:480px;
	font-size:18px;	
	margin-bottom:10px;
}

#details-paragraph {
	width:480px;
	font-size:18px;
	text-align:center;
}

.contact-paragraph {
	width:480px;
	font-size:18px;
	margin-top:10px;
}

footer {
	display:flex;
	justify-content:center;
	align-items:center;
	height:50px;
	width:300px;
	color:white;
	background:darkgray;
	position:absolute;
	bottom:0;
	right:0;
	border-radius: 1px 0px 0px 0px;
	box-shadow: 0px 0px 5px darkgray;
}

@media (max-width:720px) {
	.navigation-menu {
		width:272px
	}
	.content {
		width:480px;
	}
	.title,.about-paragraph,.contact-paragraph,#details-paragraph {
		width:320px;
	}
}

@media (max-width:532px) {
	.main {
		height: 520px;
	}
	.vertical-hr {
		display:block;
	}
	.navigation-menu {
		width:198px
	}
	.content {
		height:348px;
		width:320px;
	}
	.title,.about-paragraph,.contact-paragraph,#details-paragraph {
		width:240px;
	}
}
